<template>
  <div id="accoutList">
      <div class="accoutList">
          <h3 class="customManage_title">筛选区</h3>
            <ul class="infoList_filter">
                <li class="infoList_filter_item">
                    <span class="filterSpan">账号状态</span>
                    <el-select
                    class="selectBox"
                    v-model="userStatus"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in userStatusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </el-select>
                    <el-input 
                    class="inputBox"
                    v-model="searchValue"
                    placeholder="支持搜索账号名称/用户名">
                    </el-input>
                </li>
                <li class="infoList_filter_item">
                    <span class="filterSpan">创建时间</span>
                    <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="--"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                   
                </li>
                <li class="infoList_filter_btn">
                    <el-button type="primary" @click="reset">重置</el-button>
                    <el-button type="danger" @click="getAccoutList">查询</el-button>
                </li>
            </ul>
            <h3 class="customManage_title">内容区</h3>
            <div class="tableBox">
                <el-table
                    :data="tableData"
                    border
                    class="sentimentTable"
                    style="width: 100%">
                    <el-table-column
                    prop="pageNo"
                    type="index"
                    width="50px"
                    :index="indexCount"
                    label="序号">
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    :show-overflow-tooltip="true"
                    label="账号名称">
                    </el-table-column>
                    <el-table-column
                    prop="loginName"
                    :show-overflow-tooltip="true"
                    label="登录用户名">
                    </el-table-column>
                    <el-table-column
                    prop="userStatus"
                    label="状态">
                    <template slot-scope="scope">
                        <span>{{scope.row.userStatus=='1'?'正常':scope.row.userStatus=='2'?'冻结':scope.row.userStatus=='3'?'已过期':'' }}</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="createTime"
                    :show-overflow-tooltip="true"
                    label="创建时间">
                    </el-table-column>                  
                    <el-table-column
                    prop="lastLoginTime"
                    :show-overflow-tooltip="true"
                    label="上次登录">
                    </el-table-column>
                    <el-table-column
                    width="150px"
                    label="操作">
                    <template slot-scope="scope">
                        <span class="tableBtn edit" @click="viewAccoutDetail(scope.row)">详情</span>
                        <span class="tableBtn edit" v-if="scope.row.userStatus==1" @click="frozenUser(scope.row.id, 1)">冻结</span>
                        <span class="tableBtn edit" v-if="scope.row.userStatus==2" @click="frozenUser(scope.row.id, 0)">解冻</span>
                        <span class="tableBtn delete" @click="deleteCusUser(scope.row)">删除</span>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSize"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next"
                    :total="page.total"
                >
                </el-pagination>
            </div>
      </div>
  </div>
</template>

<script>
import '../assets/css/accoutList.css'
import {formatDate} from '../utils/common.js'
export default {
    data(){
        return{
            userStatus: "",
            userStatusList: [
                { value: "1", label: "正常" },
                { value: "2", label: "冻结" },
                { value: "3", label: "已过期" }
            ],
            searchValue: '',
            dateRange: '',
            tableData: [
            ],
            page: {
                currentPage: 1,
                pageSize: [10, 20, 30, 50, 100],
                size: 10,
                total: 100
            }
        }
    },
    methods:{
        deleteCusUser(item){ // 删除用户
            let param = item.id;
            this.$Api.deleteCusUser(param).then(res => {
                console.log(res)
                if(res.code == '200'){
                    this.getAccoutList()
                }
            })
        },
        indexCount(index){
            return (this.page.currentPage - 1)* this.page.size + index +1
        },
        handleCurrentChange(val){
            this.page.currentPage = val;
            this.page.size = 1;
            this.getAccoutList();
        },
        viewAccoutDetail(item){
            // console.log(item)
            this.$router.push({name: 'accountDetail', params: {userId: item.id}})
        },
        frozenUser(userId, type){ // 冻结/解冻客户
            let param={
                userId: userId,
                type: type
            }
            this.$Api.frozenUser(param).then(res => {
                console.log(res)
                if(res.code == '200'){
                    this.getAccoutList()
                }
            })
        },
        handleSizeChange(val){
            this.page.size = val;
            this.getAccoutList();
        },
        getAccoutList(){
            let beginTime = '';
            let endTime = '';
            if(this.dateRange.length > 0){
                beginTime = this.formatDate(this.dateRange[0]);
                endTime = this.formatDate(this.dateRange[1]);
            }
            let param = {
                pageNum: this.page.currentPage,
                pageSize: this.page.size,
                isFrontAcct: '0',
                searchValue: this.searchValue,
                userStatus: this.userStatus,
                beginTime: beginTime,
                endTime: endTime
            };
            this.$Api.userList(param).then(res => {
               console.log(res);
                if(res.code == '200'){
                    this.tableData = res.rows;
                    this.page.total = res.total;
               }
            })
        },
        reset(){
            this.searchValue = '';
            this.dateRange = '';
            this.userStatus = '';
            this.page.size = 10;
            this.page.currentPage = 1;
        },
        formatDate (time){
            let date = new Date(time)
            return formatDate(date,'yyyy-MM-dd hh:mm:ss') //年-月-日 时分
        }
    },
    created(){
        this.getAccoutList()
    }
}
</script>
